<template>
  <div class="register">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="box-card" shadow="always">
          <template #header>
            <div class="card-header">
              <span>学生成绩在线发布系统</span>
            </div>
          </template>
        <el-form
          :model="user"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item label="" prop="account">
            <el-input v-model="user.account" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input v-model="user.password" placeholder="密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="" prop="passwordtemp">
            <el-input v-model="user.passwordtemp" placeholder="请再次输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button  @click="back()">返回</el-button>
            <el-button type="primary" @click="register('ruleForm')">注册</el-button>
          </el-form-item>
        </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import { path } from "../config.json";
import crypto from "crypto";
export default {
  name: "Register",
  data() {
    var Valipass = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请再次输入密码"));
      } else if (value != this.user.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      user: {
        account: "",
        password: "",
        passwordtemp: "",
        level: "",
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        passwordtemp: [
          { required: true, validator: Valipass, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios({
            method: "post",
            url: path + "/user/register",
            data: {
              account: this.user.account,
              password: crypto.createHash('md5').update(this.user.password).digest('hex'),
            },
          })
            .then((response) => {
              let res = response.data;
              if (res == "注册成功") {
                this.$router.push({
                  name: "Login",
                });
              } else if (res == "用户已存在") {
                ElMessage.error("该用户名已被注册，请更换用户名！");
              } else if (res == "注册失败") {
                ElMessage.error("注册失败，请重新操作！");
              } else {
                ElMessage.error("与服务器通信失败，请重试！");
              }
            })
            .catch(function (error) {
              ElMessage.error("与服务器通信失败，请重试！");
            });
        }
      });
    },
    back(){
      this.$router.push({
        name:'Login'
      })
    }
  },
};
</script>
<style scoped>
.register{
  background-image: url("../assets/2020-10-10.jpg");
  background-size: cover;
  /*设置全局大小*/
  position: fixed;
  width: 100%;
  height: 100%;
}
.box-card{
  margin-top:10%;
  margin-left:37%;
  margin-right:37%;
  opacity: 0.97;
}
</style>